﻿<div class="zui-pageContent">
    <div class="zui-doc">
        <h3 class="page-header">参数列表</h3>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <td>参数名</td>
                    <td>类型</td>
                    <td>描述</td>
                    <td>默认值</td></tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <a name="property_title" key="title" class="linkname"></a>title</td>
                    <td>String</td>
                    <td class="description">表格标题</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_width" key="width" class="linkname"></a>width</td>
                    <td>String|Int</td>
                    <td class="description">宽度值,支持百分比</td>
                    <td>'auto'</td></tr>
                <tr>
                    <td>
                        <a name="property_height" key="height" class="linkname"></a>height</td>
                    <td>String|Int</td>
                    <td class="description">高度值,支持百分比</td>
                    <td>'auto'</td></tr>
                <tr>
                    <td>
                        <a name="property_columnWidth" key="columnWidth" class="linkname"></a>columnWidth</td>
                    <td>Int</td>
                    <td class="description">默认列宽度</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_resizable" key="resizable" class="linkname"></a>resizable</td>
                    <td>String</td>
                    <td class="description">table是否可伸缩(暂不支持)</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_url" key="url" class="linkname"></a>url</td>
                    <td>String</td>
                    <td class="description">ajax url</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_data" key="data" class="linkname"></a>data</td>
                    <td>Object</td>
                    <td class="description">table data</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_usePager" key="usePager" class="linkname"></a>usePager</td>
                    <td>Boolean</td>
                    <td class="description">是否分页</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_page" key="page" class="linkname"></a>page</td>
                    <td>Int</td>
                    <td class="description">默认当前页</td>
                    <td>1</td></tr>
                <tr>
                    <td>
                        <a name="property_pageSize" key="pageSize" class="linkname"></a>pageSize</td>
                    <td>Int</td>
                    <td class="description">每页默认的结果数</td>
                    <td>10</td></tr>
                <tr>
                    <td>
                        <a name="property_pageSizeOptions" key="pageSizeOptions" class="linkname"></a>pageSizeOptions</td>
                    <td>Array</td>
                    <td class="description">可选择设定的每页结果数</td>
                    <td>[10, 20, 30, 40, 50]</td></tr>
                <tr>
                    <td>
                        <a name="property_parms" key="parms" class="linkname"></a>parms</td>
                    <td>Object</td>
                    <td class="description">ajax 参数</td>
                    <td>[]</td></tr>
                <tr>
                    <td>
                        <a name="property_columns" key="columns" class="linkname"></a>columns</td>
                    <td>Array</td>
                    <td class="description">
                        <a href="#columns">列</a></td>
                    <td>[]</td></tr>
                <tr>
                    <td>
                        <a name="property_minColToggle" key="minColToggle" class="linkname"></a>minColToggle</td>
                    <td>Int</td>
                    <td class="description">最小显示的列数目</td>
                    <td>1</td></tr>
                <tr>
                    <td>
                        <a name="property_dataAction" key="dataAction" class="linkname"></a>dataAction</td>
                    <td>String</td>
                    <td class="description">提交数据的方式：本地(local)或(server),选择本地方式时将在客服端分页、排序</td>
                    <td>'server'</td></tr>
                <tr>
                    <td>
                        <a name="property_showTableToggleBtn" key="showTableToggleBtn" class="linkname"></a>showTableToggleBtn</td>
                    <td>Bool</td>
                    <td class="description">是否显示'显示隐藏Grid'按钮</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_switchPageSizeApplyComboBox" key="switchPageSizeApplyComboBox" class="linkname"></a>switchPageSizeApplyComboBox</td>
                    <td>Bool</td>
                    <td class="description">切换每页记录数是否应用ligerComboBox</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_allowAdjustColWidth" key="allowAdjustColWidth" class="linkname"></a>allowAdjustColWidth</td>
                    <td>Int</td>
                    <td class="description">是否允许调整列宽</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_checkbox" key="checkbox" class="linkname"></a>checkbox</td>
                    <td>Bool</td>
                    <td class="description">是否显示复选框</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_allowHideColumn" key="allowHideColumn" class="linkname"></a>allowHideColumn</td>
                    <td>Bool</td>
                    <td class="description">是否显示'切换列层'按钮</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_enabledEdit" key="enabledEdit" class="linkname"></a>enabledEdit</td>
                    <td>Bool</td>
                    <td class="description">是否允许编辑</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_isScroll" key="isScroll" class="linkname"></a>isScroll</td>
                    <td>Bool</td>
                    <td class="description">设置为false时将不会显示滚动条，高度自适应</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_dateFormat" key="dateFormat" class="linkname"></a>dateFormat</td>
                    <td>String</td>
                    <td class="description">默认时间显示格式</td>
                    <td>'yyyy-MM-dd'</td></tr>
                <tr>
                    <td>
                        <a name="property_inWindow" key="inWindow" class="linkname"></a>inWindow</td>
                    <td>Bool</td>
                    <td class="description">是否以窗口的高度为准 height设置为百分比时可用</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_statusName" key="statusName" class="linkname"></a>statusName</td>
                    <td>String</td>
                    <td class="description">状态名</td>
                    <td>'__status'</td></tr>
                <tr>
                    <td>
                        <a name="property_method" key="method" class="linkname"></a>method</td>
                    <td>String</td>
                    <td class="description">服务器提交方式</td>
                    <td>'post'</td></tr>
                <tr>
                    <td>
                        <a name="property_async" key="async" class="linkname"></a>async</td>
                    <td>Bool</td>
                    <td class="description">是否异步</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_fixedCellHeight" key="fixedCellHeight" class="linkname"></a>fixedCellHeight</td>
                    <td>Bool</td>
                    <td class="description">是否固定单元格的高度</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_heightDiff" key="heightDiff" class="linkname"></a>heightDiff</td>
                    <td>Int</td>
                    <td class="description">高度补差,当设置height:100%时，可能会有高度的误差，可以通过这个属性调整</td>
                    <td>0</td></tr>
                <tr>
                    <td>
                        <a name="property_cssClass" key="cssClass" class="linkname"></a>cssClass</td>
                    <td>String</td>
                    <td class="description">附加给Grid的类名</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_root" key="root" class="linkname"></a>root</td>
                    <td>String</td>
                    <td class="description">数据源字段名</td>
                    <td>'Rows'</td></tr>
                <tr>
                    <td>
                        <a name="property_record" key="record" class="linkname"></a>record</td>
                    <td>String</td>
                    <td class="description">数据源记录数字段名</td>
                    <td>'Total'</td></tr>
                <tr>
                    <td>
                        <a name="property_pageParmName" key="pageParmName" class="linkname"></a>pageParmName</td>
                    <td>String</td>
                    <td class="description">页索引参数名，(提交给服务器)</td>
                    <td>'page'</td></tr>
                <tr>
                    <td>
                        <a name="property_pagesizeParmName" key="pagesizeParmName" class="linkname"></a>pagesizeParmName</td>
                    <td>String</td>
                    <td class="description">页记录数参数名，(提交给服务器)</td>
                    <td>'pagesize'</td></tr>
                <tr>
                    <td>
                        <a name="property_sortnameParmName" key="sortnameParmName" class="linkname"></a>sortnameParmName</td>
                    <td>String</td>
                    <td class="description">页排序列名(提交给服务器)</td>
                    <td>'sortname'</td></tr>
                <tr>
                    <td>
                        <a name="property_sortorderParmName" key="sortorderParmName" class="linkname"></a>sortorderParmName</td>
                    <td>String</td>
                    <td class="description">页排序方向(提交给服务器)</td>
                    <td>'sortorder'</td></tr>
                <tr>
                    <td>
                        <a name="property_allowUnSelectRow" key="allowUnSelectRow" class="linkname"></a>allowUnSelectRow</td>
                    <td>Bool</td>
                    <td class="description">是否允许取消选择行</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_alternatingRow" key="alternatingRow" class="linkname"></a>alternatingRow</td>
                    <td>Bool</td>
                    <td class="description">是否附加奇偶行效果行</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_mouseoverRowCssClass" key="mouseoverRowCssClass" class="linkname"></a>mouseoverRowCssClass</td>
                    <td>String</td>
                    <td class="description">鼠标经过行时的样式</td>
                    <td>'l-grid-row-over'</td></tr>
                <tr>
                    <td>
                        <a name="property_enabledSort" key="enabledSort" class="linkname"></a>enabledSort</td>
                    <td>Bool</td>
                    <td class="description">是否允许排序</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_rowAttrRender" key="rowAttrRender" class="linkname"></a>
                        <a href="#linkpro125" title="点击查看示例">rowAttrRender</a></td>
                    <td>Function</td>
                    <td class="description">行自定义属性渲染器(包括style，也可以定义)</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_groupColumnName" key="groupColumnName" class="linkname"></a>
                        <a href="#linkpro126" title="点击查看示例">groupColumnName</a></td>
                    <td>String</td>
                    <td class="description">分组列名</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_groupColumnDisplay" key="groupColumnDisplay" class="linkname"></a>groupColumnDisplay</td>
                    <td>String</td>
                    <td class="description">分组列显示名字</td>
                    <td>'分组'</td></tr>
                <tr>
                    <td>
                        <a name="property_groupRender" key="groupRender" class="linkname"></a>
                        <a href="#linkpro128" title="点击查看示例">groupRender</a></td>
                    <td>Function</td>
                    <td class="description">分组渲染器</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_totalRender" key="totalRender" class="linkname"></a>
                        <a href="#linkpro129" title="点击查看示例">totalRender</a></td>
                    <td>String</td>
                    <td class="description">统计行(全部数据)</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_delayLoad" key="delayLoad" class="linkname"></a>delayLoad</td>
                    <td>Bool</td>
                    <td class="description">初始化是是否不加载</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_where" key="where" class="linkname"></a>where</td>
                    <td>Function</td>
                    <td class="description">数据过滤查询函数,(参数一 data item，参数二 data item index)</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_selectRowButtonOnly" key="selectRowButtonOnly" class="linkname"></a>selectRowButtonOnly</td>
                    <td>Bool</td>
                    <td class="description">复选框模式时，是否只允许点击复选框才能选择行</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_whenRClickToSelect" key="whenRClickToSelect" class="linkname"></a>whenRClickToSelect</td>
                    <td>Bool</td>
                    <td class="description">右击行时是否选中</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_contentType" key="contentType" class="linkname"></a>contentType</td>
                    <td>String</td>
                    <td class="description">Ajax contentType参数</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_checkboxColWidth" key="checkboxColWidth" class="linkname"></a>checkboxColWidth</td>
                    <td>Int</td>
                    <td class="description">复选框列宽度</td>
                    <td>27</td></tr>
                <tr>
                    <td>
                        <a name="property_detailColWidth" key="detailColWidth" class="linkname"></a>detailColWidth</td>
                    <td>Int</td>
                    <td class="description">明细列宽度</td>
                    <td>29</td></tr>
                <tr>
                    <td>
                        <a name="property_clickToEdit" key="clickToEdit" class="linkname"></a>clickToEdit</td>
                    <td>Bool</td>
                    <td class="description">单元格编辑状态</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_detailToEdit" key="detailToEdit" class="linkname"></a>
                        <a href="#linkpro138" title="点击查看示例">detailToEdit</a></td>
                    <td>Bool</td>
                    <td class="description">明细编辑状态</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_minColumnWidth" key="minColumnWidth" class="linkname"></a>minColumnWidth</td>
                    <td>Int</td>
                    <td class="description">最小列宽</td>
                    <td>80</td></tr>
                <tr>
                    <td>
                        <a name="property_tree" key="tree" class="linkname"></a>tree</td>
                    <td>Object</td>
                    <td class="description">树模式</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_isChecked" key="isChecked" class="linkname"></a>isChecked</td>
                    <td>Function</td>
                    <td class="description">初始化选择行 函数</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_frozen" key="frozen" class="linkname"></a>frozen</td>
                    <td>Bool</td>
                    <td class="description">冻结列状态</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_frozenDetail" key="frozenDetail" class="linkname"></a>frozenDetail</td>
                    <td>Bool</td>
                    <td class="description">明细按钮是否在固定列中</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_frozenCheckbox" key="frozenCheckbox" class="linkname"></a>frozenCheckbox</td>
                    <td>Bool</td>
                    <td class="description">复选框按钮是否在固定列中</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_detailHeight" key="detailHeight" class="linkname"></a>detailHeight</td>
                    <td>Int</td>
                    <td class="description">明细框的高度</td>
                    <td>260</td></tr>
                <tr>
                    <td>
                        <a name="property_rownumbers" key="rownumbers" class="linkname"></a>rownumbers</td>
                    <td>Bool</td>
                    <td class="description">是否显示行序号</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_frozenRownumbers" key="frozenRownumbers" class="linkname"></a>frozenRownumbers</td>
                    <td>Bool</td>
                    <td class="description">行序号是否在固定列中</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_rownumbersColWidth" key="rownumbersColWidth" class="linkname"></a>rownumbersColWidth</td>
                    <td>Int</td>
                    <td class="description">序号列宽</td>
                    <td>26</td></tr>
                <tr>
                    <td>
                        <a name="property_colDraggable" key="colDraggable" class="linkname"></a>colDraggable</td>
                    <td>Bool</td>
                    <td class="description">是否允许表头拖拽</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_rowDraggable" key="rowDraggable" class="linkname"></a>rowDraggable</td>
                    <td>Bool</td>
                    <td class="description">是否允许行拖拽</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_rowDraggingRender" key="rowDraggingRender" class="linkname"></a>
                        <a href="#linkpro151" title="点击查看示例">rowDraggingRender</a></td>
                    <td>Object</td>
                    <td class="description">行拖动时渲染函数</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_autoCheckChildren" key="autoCheckChildren" class="linkname"></a>autoCheckChildren</td>
                    <td>Bool</td>
                    <td class="description">是否自动选中子节点</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_rowHeight" key="rowHeight" class="linkname"></a>rowHeight</td>
                    <td>Int</td>
                    <td class="description">行默认的高度</td>
                    <td>22</td></tr>
                <tr>
                    <td>
                        <a name="property_headerRowHeight" key="headerRowHeight" class="linkname"></a>headerRowHeight</td>
                    <td>Int</td>
                    <td class="description">表头行的高度</td>
                    <td>23</td></tr>
                <tr>
                    <td>
                        <a name="property_toolbar" key="toolbar" class="linkname"></a>toolbar</td>
                    <td>Object</td>
                    <td class="description">工具条,参数同 ligerToolbar的</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_headerImg" key="headerImg" class="linkname"></a>headerImg</td>
                    <td>String</td>
                    <td class="description">表格头部图标</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_isSelected" key="isSelected" class="linkname"></a>isSelected</td>
                    <td>Function</td>
                    <td class="description">是否选择的判断函数</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_detail" key="detail" class="linkname"></a>
                        <a href="#linkpro419" title="点击查看示例">detail</a></td>
                    <td>Object</td>
                    <td class="description">
                        <a href="#Detail">明细</a></td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_isShowDetailToggle" key="isShowDetailToggle" class="linkname"></a>isShowDetailToggle</td>
                    <td>Function</td>
                    <td class="description">是否显示展开/收缩明细的判断函数(rowdata)</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_toolbarShowInLeft" key="toolbarShowInLeft" class="linkname"></a>toolbarShowInLeft</td>
                    <td>bool</td>
                    <td class="description">工具条显示在左边</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>
                        <a name="property_unSetValidateAttr" key="unSetValidateAttr" class="linkname"></a>unSetValidateAttr</td>
                    <td>Bool</td>
                    <td class="description">不设置validate</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>
                        <a name="property_editorTopDiff" key="editorTopDiff" class="linkname"></a>editorTopDiff</td>
                    <td>Init</td>
                    <td class="description">编辑器位置误差调整</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>
                        <a name="property_editorLeftDiff" key="editorLeftDiff" class="linkname"></a>editorLeftDiff</td>
                    <td>Init</td>
                    <td class="description">编辑器位置误差调整</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>
                        <a name="property_editorHeightDiff" key="editorHeightDiff" class="linkname"></a>editorHeightDiff</td>
                    <td>Init</td>
                    <td class="description">编辑器高度误差调整</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>
                        <a name="property_urlParms" key="urlParms" class="linkname"></a>urlParms</td>
                    <td>Object</td>
                    <td class="description">url带参(支持函数)</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_hideLoadButton" key="hideLoadButton" class="linkname"></a>hideLoadButton</td>
                    <td>Bool</td>
                    <td class="description">是否隐藏刷新按钮</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_pageRender" key="pageRender" class="linkname"></a>pageRender</td>
                    <td>Function</td>
                    <td class="description">分页栏自定义函数</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_isSingleCheck" key="isSingleCheck" class="linkname"></a>isSingleCheck</td>
                    <td>Bool</td>
                    <td class="description">复选框选择的时候是否单选模式</td>
                    <td>false</td></tr>
                <tr>
                    <td>
                        <a name="property_rowClsRender" key="rowClsRender" class="linkname"></a>rowClsRender</td>
                    <td>Function</td>
                    <td class="description">行自定义css类名函数</td>
                    <td>null</td></tr>
                <tr>
                    <td>
                        <a name="property_selectable" key="selectable" class="linkname"></a>selectable</td>
                    <td>Bool</td>
                    <td class="description">是否可选择</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_rowSelectable" key="rowSelectable" class="linkname"></a>rowSelectable</td>
                    <td>Bool</td>
                    <td class="description">是否可选择</td>
                    <td>true</td></tr>
                <tr>
                    <td>
                        <a name="property_scrollToPage" key="scrollToPage" class="linkname"></a>scrollToPage</td>
                    <td>Bool</td>
                    <td class="description">滚动时加载分页数据</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>
                        <a name="property_scrollToAppend" key="scrollToAppend" class="linkname"></a>scrollToAppend</td>
                    <td>Bool</td>
                    <td class="description">滚动时分页 是否追加分页的形式</td>
                    <td>&nbsp;</td></tr>
            </tbody>
        </table>

        <a name="ColumnEditor"></a>
        <h3>ColumnEditor</h3>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <td>参数名</td>
                    <td>类型</td>
                    <td>描述</td>
                    <td>默认值</td></tr>
            </thead>
            <tbody>
                <tr>
                    <td>onChange</td>
                    <td>Function</td>
                    <td>{
                        <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; record: rowdata,
                        <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value: editValue,
                        <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; column: column,
                        <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rowindex: rowIndex,
                        <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid: liger grid object
                        <br />}</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>type</td>
                    <td>&nbsp;</td>
                    <td>编辑器类型，包括text、checkbox、date、select、spinner|int|float (column)</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>data</td>
                    <td>&nbsp;</td>
                    <td>编辑器类型包olumn)</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>valueField</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>textField</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>minValue</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>maxValue</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>ext</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>
                        <a href="#linksubpro24" title="点击查看示例">onChanged</a></td>
                    <td>Function</td>
                    <td>{
                        <br style="color: rgb(255, 0, 0);" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; record: rowdata,
                        <br style="color: rgb(255, 0, 0);" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value: editValue,
                        <br style="color: rgb(255, 0, 0);" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; column: column,
                        <br style="color: rgb(255, 0, 0);" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rowindex: rowIndex,
                        <br style="color: rgb(255, 0, 0);" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grid: liger grid object
                        <br style="color: rgb(255, 0, 0);" />}</td>
                    <td>&nbsp;</td></tr>
            </tbody>
        </table>

        <a name="Columns"></a>
        <h3>Columns</h3>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <td>参数名</td>
                    <td>类型</td>
                    <td>描述</td>
                    <td>默认值</td></tr>
            </thead>
            <tbody>
                <tr>
                    <td>id</td>
                    <td>String</td>
                    <td>列ID</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>name</td>
                    <td>String</td>
                    <td>表格列名</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>
                        <a href="#linksubpro3" title="点击查看示例">totalSummary</a></td>
                    <td>Object</td>
                    <td>汇总</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>columns</td>
                    <td>Object</td>
                    <td>多表头支持</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>isAllowHide</td>
                    <td>Bool</td>
                    <td>是否允许隐藏,如果允许，将会出现在【显示/隐藏列右键菜单】</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>isSort</td>
                    <td>Bool</td>
                    <td>是否允许排序</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>type</td>
                    <td>String</td>
                    <td>排序类型,包括string、int、float、date</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>width</td>
                    <td>Int</td>
                    <td>表格列宽度</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>minWidth</td>
                    <td>Int</td>
                    <td>表格列最小允许宽度(调整大小时将不允许小于这个值)</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>format</td>
                    <td>String</td>
                    <td>格式化</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>align</td>
                    <td>String</td>
                    <td>左右对齐,left、right、center</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>hide</td>
                    <td>String</td>
                    <td>初始化隐藏</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>editor</td>
                    <td>Obect</td>
                    <td>
                        <a href="#ColumnEditor">编辑器</a></td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>
                        <a href="#linksubpro14" title="点击查看示例">render</a></td>
                    <td>Function</td>
                    <td>单元格渲染器</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>display</td>
                    <td>String</td>
                    <td>表格列标题</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>headerRender</td>
                    <td>Function</td>
                    <td>头部单元格渲染器(column)</td>
                    <td>&nbsp;</td></tr>
            </tbody>
        </table>

        <a name="Detail"></a>
        <h3>Detail</h3>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <td>参数名</td>
                    <td>类型</td>
                    <td>描述</td>
                    <td>默认值</td></tr>
            </thead>
            <tbody>
                <tr>
                    <td>onShowDetail</td>
                    <td>Function</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>onExtend</td>
                    <td>Function</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>height</td>
                    <td>Int</td>
                    <td>高度</td>
                    <td>&nbsp;</td></tr>
                <tr>
                    <td>onCollapse</td>
                    <td>Function</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td></tr>
            </tbody>
        </table>

        <a name="linkpro125"></a>
        <h3 class="property">rowAttrRender参数 示例：</h3>
        <pre>
$(&quot;#maingrid4&quot;).ligerGrid({
    columns: [
        { display: '主键', name: 'CustomerID', align: 'left', width: 120 } ,
        { display: '公司名', name: 'CompanyName', minWidth: 60 },
        { display: '联系名', name: 'ContactName', width: 50, align: 'left' },
        { display: '联系名', name: 'ContactName', minWidth: 140 }, 
        { display: '城市', name: 'City' }
    ], data: CustomersData, pageSize: 20, sortName: 'CustomerID',
    width: '100%', height: '99%', checkbox: false,
    rowAttrRender: function (rowdata,rowid)
    {
        if (rowdata.CustomerID.indexOf('A') == 0)
        {
            return &quot;style='background:#F1D3F7;'&quot;;
        }
        return &quot;&quot;;
    }
});
        </pre>

        <a name="linkpro126"></a>
        <h3 class="property">groupColumnName参数  示例：</h3>
        <pre>
$(&quot;#maingrid4&quot;).ligerGrid({
    columns: [
        { display: '主键', name: 'CustomerID', align: 'left', width: 120 },
        { display: '公司名', name: 'CompanyName', minWidth: 60 },
        { display: '联系名', name: 'ContactName', width: 50, align: 'left' }, 
        { display: '城市', name: 'City' }
    ],  pageSize:20,
    data: CustomersData, 
    height:'100%',groupColumnName:'City',groupColumnDisplay:'城市'
});
        </pre>

        <a name="linkpro128"></a>
        <h3 class="property">groupRender参数  示例：</h3>
        <pre>
$(&quot;#maingrid4&quot;).ligerGrid({
    columns: [
        { display: '主键', name: 'CustomerID', align: 'left', width: 120 },
        { display: '公司名', name: 'CompanyName', minWidth: 60 },
        { display: '联系名', name: 'ContactName', width: 50, align: 'left' },
        { display: '城市', name: 'City' }
    ], pageSize: 20,
    data: CustomersData,
    height: '100%', 
    groupColumnName: 'City', 
    groupRender: function (city,groupdata)
    {
        return '城市 ' + city + '(Count=' + groupdata.length + ')';
    }
});
        </pre>

        <a name="linkpro129"></a>
        <h3 class="property">totalRender参数  示例：</h3>
        <pre>
$(function () { 
    $(&quot;#maingrid&quot;).ligerGrid({
        columns: [...],
        dataAction: 'local',
        data: AllProductData,
        sortName: 'ProductID',
        showTitle: false,
        totalRender: f_totalRender,
        width: '100%',
        height: '100%',
        heightDiff:-10
    });
    $(&quot;#pageloading&quot;).hide();
});
function f_totalRender(data, currentPageData)
{
    return &quot;总仓库数量:&quot;+data.UnitsInStockTotal; 
}
        </pre>

        <a name="linkpro138"></a>
        <h3 class="property">detailToEdit参数  示例：</h3>
        <pre>
function f_initGrid()
{ 
    $(&quot;#maingrid&quot;).ligerGrid({
        columns: [
            { display: '主键', name: 'ID', width: 50, type: 'int' },
            { display: '名字', name: 'RealName',
                editor: { type: 'text' }
            },
            { display: '性别', width: 50, name: 'Sex',type:'int',
                editor: { type: 'select', data: sexData, valueField: 'Sex' },
                render: function (item)
                {
                    if (parseInt(item.Sex) == 1) return '男';
                    return '女';
                }
            },
            { display: '年龄', name: 'Age', width: 50, type: 'int', editor: { type: 'int'} },
            { display: '入职日期', name: 'IncomeDay', type: 'date', format: 'yyyy年MM月dd', width: 100, editor: { type: 'date'} },
            { display: '部门', name: 'DepartmentID', width: 120, isSort: false,
            editor: { type: 'select', data: DepartmentList, valueField: 'DepartmentID', textField: 'DepartmentName' }, render: function (item)
            {
                for (var i = 0; i &lt; DepartmentList.length; i++)
                {
                    if (DepartmentList[i]['DepartmentID'] == item.DepartmentID)
                        return DepartmentList[i]['DepartmentName']
                    }
                    return item.DepartmentName;
                }
            } 
        ],
        onSelectRow: function (rowdata, rowindex)
        {
            $(&quot;#txtrowindex&quot;).val(rowindex);
        },
        enabledEdit: true, detailToEdit: true, 
        isScroll: false,  frozen:false,
        data:EmployeeData,
        width: '100%'
    });   
}
        </pre>
        <a name="linkpro151"></a>
        <h3 class="property">rowDraggingRender参数 示例：</h3>
        <pre>
$(&quot;#maingrid&quot;).ligerGrid({
    columns: [
        { display: '部门名', name: 'name', width: 250, align: 'left' },
        { display: '部门标示', name: 'id', id: 'id1', width: 250, type: 'int', align: 'left' },
        { display: '部门描述', name: 'remark', width: 250, align: 'left' }
    ], width: '100%', pageSizeOptions: [5, 10, 15, 20], height: '97%',
    allowHideColumn: false, rownumbers: true, colDraggable: true, rowDraggable: true, checkbox: false,
    data: TreeDeptData, alternatingRow: false, tree: { columnName: 'name' },
    rowDraggingRender: function (rows)
    {
        return rows[0].name;
    }
});
        </pre>

        <a name="linkpro419"></a>
        <h3 class="property">detail参数  示例：</h3>
        <pre>
&lt;div class=&quot;liger-grid&quot; id=&quot;grid1&quot; data=&quot;CustomersData&quot;&gt;
    &lt;ul class=&quot;columns&quot;&gt;
        &lt;li name=&quot;CustomerID&quot; width=&quot;200&quot;&gt;客户&lt;/li&gt;
        &lt;li name=&quot;CompanyName&quot; width=&quot;200&quot;&gt;公司&lt;/li&gt;
        &lt;li display=&quot;地址&quot;&gt;
            &lt;ul class=&quot;columns&quot;&gt;
                &lt;li name=&quot;City&quot; width=&quot;100&quot;&gt;城市&lt;/li&gt;
                &lt;li name=&quot;Address&quot; width=&quot;100&quot;&gt;地址&lt;/li&gt;
                &lt;li name=&quot;PostalCode&quot; width=&quot;100&quot;&gt;PostalCode&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class= &quot;detail&quot; height=&quot;auto&quot; onShowDetail=&quot;f_onShowDetail&quot;&gt;&lt;/div&gt;
&lt;/div&gt; 

&lt;script&gt;
function f_onShowDetail(record, container, callback) {
    var out = ['&lt;div style=&quot;margin:10px&quot;&gt;'];
    out.push(&quot;&lt;div&gt;ContactTitle:&quot; + record.ContactTitle + &quot;&lt;/div&gt;&quot;);
    out.push(&quot;&lt;div&gt;Phone:&quot; + record.Phone + &quot;&lt;/div&gt;&quot;);
    out.push(&quot;&lt;/div&gt;&quot;);
    $(container).html(out.join(''));
} 
&lt;/script&gt;
</pre>

<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
    var g;
    $(function ()
    {
        f_showCustomers(); 
    });
    //显示顾客
    function f_showCustomers()
    {
        g = $(&quot;#maingrid&quot;).ligerGrid({
            columns: [
            { display: '顾客', name: 'CustomerID', align: 'left',frozen:true },
            { display: '公司名', name: 'CompanyName' },
            { display: '联系人', name: 'ContactName' },
            { display: '地址', name: 'Address' },
            { display: '邮编', name: 'PostalCode' },
            { display: '城市', name: 'City' }
            ], isScroll: false, frozen: false,
            pageSizeOptions: [3, 10, 20, 30, 40, 50, 100],
            data: CustomersData,
            showTitle: false,width:'90%',columnWidth:120,
            detail: { onShowDetail: f_showOrder,height:'auto' }
        });
    }
    function f_getOrdersData(CustomerID)
    {
        var data = { Rows: [] };
        for (var i = 0; i &lt; AllOrdersData.Rows.length; i++)
        {
            if (AllOrdersData.Rows[i].CustomerID == CustomerID)
                data.Rows.push(AllOrdersData.Rows[i]);
        }
        return data;
    }
    //显示顾客订单
    function f_showOrder(row, detailPanel,callback)
    {
        var grid = document.createElement('div'); 
        $(detailPanel).append(grid);
        $(grid).css('margin',10).ligerGrid({
            columns:
                        [
                        { display: '订单序号', name: 'OrderID',type:'float' },
                        { display: '运费', name: 'Freight', width: 50,type:'float' },
                        { display: '收货人', name: 'ShipName' },
                        { display: '收货地址', name: 'ShipAddress' },
                        { display: '收货城市', name: 'ShipCity' },
                        { display: '收货国家', name: 'ShipCountry' }
                        ], isScroll: false, showToggleColBtn: false, width: '90%',
            data: f_getOrdersData(row.CustomerID) , showTitle: false, columnWidth: 100
             , onAfterShowData: callback,frozen:false
        });  
    }
&lt;/script&gt;
        </pre>

        <a name="linksubpro24"></a>
        <h3 class="property">ColumnEditor onChanged参数 示例：</h3> 
        <pre>
&lt;div class=&quot;liger-grid&quot; id=&quot;grid1&quot; data-data=&quot;CustomersData&quot; data-enabledEdit=&quot;true&quot;&gt;
    &lt;ul class=&quot;columns&quot;&gt;
        &lt;li data-name=&quot;CustomerID&quot; data-width=&quot;200&quot; data-display=&quot;客户&quot;&gt; 
            &lt;input class=&quot;editor&quot; data-type=&quot;text&quot; /&gt;
        &lt;/li&gt; 
        &lt;li data-display=&quot;国家&quot; data-name=&quot;Country&quot; data-width=&quot;200&quot;&gt;
            &lt;input class=&quot;editor&quot; data-type=&quot;select&quot; data-data=&quot;getCountryData()&quot; data-textField=&quot;Country&quot; data-valueField=&quot;Country&quot; data-onChanged=&quot;f_onCountryChanged&quot;/&gt; 
        &lt;/li&gt;
        &lt;li data-display=&quot;城市&quot; data-name=&quot;City&quot; data-width=&quot;200&quot;&gt;
            &lt;input class=&quot;editor&quot; data-type=&quot;select&quot; data-textField=&quot;City&quot; data-valueField=&quot;City&quot; data-ext=&quot;f_createCityData&quot; /&gt; 
        &lt;/li&gt;
    &lt;/ul&gt; 
&lt;/div&gt;  
&lt;div id=&quot;message&quot; style=&quot;margin:10px;&quot;&gt;&lt;/div&gt;
&lt;script&gt; 
    //国家 改变事件：清空城市
    function f_onCountryChanged(e)
    {
        liger.get(&quot;grid1&quot;).updateCell('City', '', e.record);
    }
    //城市 下拉框 数据初始化,这里也可以改成 改变服务器参数( parms,url )
    function f_createCityData(e)
    {
        var Country = e.record.Country;
        var options =  {
            data: getCityData(Country)
        }; 
        return options;
    }  
&lt;/script&gt;
        </pre>

    	<a name="linksubpro3"></a>
        <h3 class="property">Columns totalSummary参数 示例：</h3> 
        <pre>
$(&quot;#maingrid&quot;).ligerGrid({
    columns: [
        { display: '主键', name: 'ProductID', type: 'int', totalSummary:
            {
                type: 'count'
            }
        },
        { display: '产品名', name: 'ProductName', align: 'left',width:200 },
        { display: '单价', name: 'UnitPrice', align: 'right',type:'float',
            totalSummary:
            {
                type: 'sum,max'
            }
        },
        { display: '仓库数量', name: 'UnitsInStock', align: 'right', type: 'float',
            totalSummary:
            {
                type: 'sum'
            }
        }
    ],isScroll: false,  data: data, sortName: 'ProductID',
    groupColumnName:'SupplierID', groupColumnDisplay:'SupplierID'
});
        </pre>

        <a name="linksubpro14"></a>
        <h3 class="property">Columns render参数 示例：</h3> 
        <pre>
$(&quot;#maingrid&quot;).ligerGrid({
    columns: [
        { display: '标示', name: 'id', width: 250, type: 'int', align: 'left' },
        { display: '金额', name: 'amount', width: 250, align: 'left', render: f_renderAmount, editor: { type: 'int'} }
    ], width: '100%', pageSizeOptions: [5, 10, 15, 20], height: '97%',
    data: TreeData, alternatingRow: false, tree: { columnName: 'id' },
    enabledEdit: true
});
function f_renderAmount(rowdata, index, value)
{
    if (!this.hasChildren(rowdata))
    {
        return value;
    }
    else
    {
        var children = this.getChildren(rowdata, true);
        var sum = 0;
        for (var i = 0, l = children.length; i &lt; l; i++)
        {
            sum += children[i].amount || 0;
        }
        return sum;
    }
}
        </pre>
    </div>
</div>
<div class="zui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
    </ul>
</div>